<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <nav v-if="isAuthenticated">
      <router-link to="/public-activities">公共活动</router-link>
      <router-link v-if="isAdmin" to="/activity-management">活动管理页</router-link>
    </nav>
  </div>
</template>

<script>
import { isAuthenticated, isAdmin } from '../utils/auth';

export default {
  computed: {
    isAuthenticated() {
      return isAuthenticated();
    },
    isAdmin() {
      return isAdmin();
    }
  }
};
</script>

<style scoped>
.home {
  text-align: center;
  padding: 2rem;
}

img {
  max-width: 100px;
  margin-bottom: 1rem;
}

nav {
  margin-top: 1rem;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
  margin: 0 0.5rem;
  text-decoration: none;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>